<!-- eslint-disable vue/no-unused-components -->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-breadcrumb style="padding-bottom: 20px;" v-show="showButton" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: './list' }">学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{  }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!--  -->
        <el-form ref="pageParams" :model="pageParams">
          <el-row>
            <el-col :span="5">
              <el-form-item label="目录名称" prop="directoryName">
                <el-input
                  style="width: 150px"
                  placeholder="请输入"
                  v-model="pageParams.directoryName"
                  size="mini"
                  clearable
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态：" prop="state">
                <el-select
                  style="width: 150px"
                  v-model="pageParams.state"
                  clearable
                  size="mini"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button size="small" @click="eliminateClick">清除</el-button>
                <el-button size="small" type="primary" @click="addCatalogueList">搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="rigth-btn">
              <el-form-item >
                <el-button v-if="$route.query.id" type="text" @click="$router.push('./list')"><i class="el-icon-back">返回学科</i></el-button>
                <span v-else></span>
                <el-button
                  icon="el-icon-edit"
                  size="small"
                  style="background-color: rgb(103, 194, 58); color: #ffffff; float: right;"
                  @click="addDirectoryClick('add', 0)"
                >
                  新增目录
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-alert
          v-if="cResultTip"
          :title="cResultTip"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>

        <!--  -->
        <el-table
          :data="catalogueList"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          class="table-hear"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            width="80px"
            label="序号"
            type="index"
          >
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default={row}>
            {{$moment(row.addDate).format("YYYY-MM-DD HH:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column prop="totals" align="center" label="面试题数量">
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{row}">
              {{ row.state === 1 ? '已启用' : '已禁用' }}
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <!--  -->
            <template #default="{row}">
              <el-button type="text" @click="addJurisdictionList(row)">
                <span v-if="row.state === 0">启用</span>
                <span v-else>禁用</span>
              </el-button>
              <el-button type="text" :disabled="row.state === 0" @click="addDirectoryClick('edit', row.id)">修改</el-button>
              <el-button type="text" :disabled="row.state === 0" @click="addDirectoryClick('dele', row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            background
            @current-change="ishandleCurrentChange"
            :current-page="Number(pageParams.page)"
            :page-size="Number(pageParams.pagesize)"
            :total="Number(pageParams.total)"
            layout="sizes, prev, pager, next, jumper"
            @size-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>

    <!-- 弹层 -->
    <directorys-add
      ref="DirectorysAdd"
      :show-dialog.sync="showDialog"
      :current-page-id="currentPageId"
      @updateLsit="addCatalogueList"
      :id="pageParams.subjectID"
    />
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list as getCatalogueList, remove, changeState } from '@/api/hmmm/directorys'
import DirectorysAdd from '../components/directorys-add'
export default {
  name: 'Directorys',
  components: {
    DirectorysAdd
  },
  data () {
    return {
      showButton: false,
      catalogueList: [],

      isButton: Boolean,
      isLoading: false,
      pageParams: {
        subjectID: null,
        directoryName: '',
        state: null,
        // subjectID: null,
        page: 1, // 当前页码
        pagesize: 10, // 每页条数
        total: 0 // 总条数
      },

      // 控制弹层显示和隐藏
      showDialog: false,
      // 记录父级id
      currentPageId: null
    }
  },
  // 创建完毕,做一次查询
  created () {
    if (this.$route.query.id) {
      this.pageParams.subjectID = this.$route.query.id
      // console.log(this.pageParams.id)
      this.addCatalogueList()
    } else {
      this.addCatalogueList()
    }
  },
  computed: {
    status () {
      return status
    },
    cResultTip () {
      return `共 ${this.pageParams.total} 条记录`
    }
  },
  methods: {
    // addCatalogueLists() {

    // },
    // 获取列表数据
    async addCatalogueList () {
      this.isLoading = true
      const { data } = await getCatalogueList(this.pageParams)
      // 获取数据给catalogueList
      this.catalogueList = data.items
      // 获取总条数
      this.pageParams.total = data.counts
      this.pageParams.page = data.page
      this.pageParams.pagesize = data.pagesize
    },
    eliminateClick () {
      // this.$refs.form.resetFields()
      this.pageParams = {
        directoryName: '',
        state: null,
        // subjectID: null,
        page: 1, // 当前页码
        pagesize: 10, // 每页条数
        total: 0 // 总条数
      }
    },
    ishandleCurrentChange (val) {
      this.pageParams.page = val
      this.addCatalogueList()
    },
    // 点击某一个页码
    handleCurrentChange (curPage) {
      this.pageParams.page = curPage
      if (this.pageParams.page === 1) {
        this.addCatalogueList()
      }
    },

    async addDirectoryClick (type, id) {
      if (type === 'add') {
        this.showDialog = true
        this.currentPageId = id
      } else if (type === 'edit') {
        this.showDialog = true
        this.currentPageId = id
        //
        this.$nextTick(() => {
          this.$refs.DirectorysAdd.getSelectionDetail()
        })
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示').then(async () => {
          await remove({ id: id })
          this.$message.success('删除部门成功')
          this.addCatalogueList()
        })
      }
    },
    async doSwitch (row) {
      var data = {
        id: row.id,
        state: Number(!row.state)
      }
      await changeState(data)
        .then(response => {
          this.$message.success('操作成功!')
          this.addCatalogueList(this.form)
        })
        .catch(response => {
          this.$message.error(status + '失败!')
        })
    },
    addJurisdictionList (row) {
      this.doSwitch(row)
    }
  }
}
</script>

<style scoped lang="scss">
.alert {
  margin: 10px 0px;
}
.rigth-btn {
  float: right;
}
.block {
  margin: 20px;
  float: right;
}
// .table-hear{
//   background-color: #f4f4f5;
// }
</style>
